<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--重要meta, 必须!-->
		<meta name="viewport"
			content="width=320, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no" />
		<title>SUBWAY</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style>
			.page--active {
				display: flex;
				height: 100%;
				padding-top: 50px;
				box-sizing: border-box;
			}

			.el-header {
				position: relative;
				display: flex;
				padding: 0;
				justify-content: space-around;
				z-index: 100;
			}

			.el-main {
				padding: 0;
				position: relative;
				z-index: 50;
				flex: 1;
				background-color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<div id="app" class="page--active">
			<el-container>
				<el-header>
					<el-select v-model="adcode" filterable placeholder="请选择" @change="fnHandChangeCode">
						<el-option v-for="item in cityList" :key="item.adcode" :label="item.name" :value="item.adcode">
						</el-option>
					</el-select>
					<el-select v-model="lineId" filterable placeholder="请选择" @change="fnHandChangelineId">
						<el-option v-for="item in LineList" :key="item.id" :label="item.shortname" :value="item.id">
						</el-option>
					</el-select>
				</el-header>
				<el-main>
					<div id="mybox"></div>
				</el-main>
			</el-container>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.13/vue.min.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://webapi.amap.com/subway?v=1.0&key=123333&callback=cbk"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: function() {
					return {
						visible: false,
						cityList: [],
						LineList: [],
						adcode: '1100',
						lineId: ''
					}
				},

				mounted() {
					this.fnInit()

				},
				methods: {
					fnInit() {
						this.$nextTick(() => {
							this.fnCreateMetro()
						})
					},
					fnCreateMetro() {
						const _this = this
						window.cbk = function() {
							var mySubway = subway("mybox", {
								adcode: _this.adcode,
								theme: "colorful",
								client: 0,
								doubleclick: {
									switch: true
								}
							});
							// 将实例挂在到data
							_this.mySubway = mySubway;

							//地铁加载完成，执行complete事件
							mySubway.event.on("subway.complete", function(ev, info) {
								var id = info.id;
								// 进行缩放
								mySubway.scale(0.3);
								// 更新地铁线路列表
								_this.fnGetLineList();
							});

							//点击站点，显示此站点的信息窗体
							mySubway.event.on("station.touch", function(ev, info) {
								var id = info.id;
								mySubway.stopAnimation();
								mySubway.addInfoWindow(id, {});
								var center = mySubway.getStCenter(id);
								mySubway.setCenter(center);
							});

							//点击线路名，高亮此线路
							mySubway.event.on("lineName.touch", function(ev, info) {
								mySubway.showLine(info.id);
								var select_obj = qs('#g-select');
								mySubway.setFitView(select_obj);
								var center = mySubway.getSelectedLineCenter();
								mySubway.setCenter(center);
							});

							//点击空白, 关闭infowindow
							mySubway.event.on("subway.touch", function() {
								mySubway.clearInfoWindow();
							});

							//设置起点
							mySubway.event.on("startStation.touch", function(ev, info) {
								mySubway.stopAnimation();
								mySubway.clearInfoWindow();
								mySubway.setStart(info.id, {});
								startInfo = info;
								route();
							});

							//设置终点
							mySubway.event.on("endStation.touch", function(ev, info) {
								mySubway.stopAnimation();
								mySubway.clearInfoWindow();
								mySubway.setEnd(info.id, {});
								endInfo = info;
								route();
							});

							//路线规划
							var startInfo = {},
								endInfo = {};

							function route() {
								if (startInfo.id && endInfo.id) {
									mySubway.route(startInfo.id, endInfo.id, {});
									startInfo = {};
									endInfo = {};
								}
							}
							if (!_this.cityList.length) {
								_this.fnGetCityList(); // 获取已开通地图城市列表
							}
						};
					},
					fnGetCityList() {
						let _this = this
						_this.mySubway.getCityList(function(res) {
							let cityList = []
							for (let key in res) {
								let obj = {
									adcode: key,
									name: res[key].name,
									city: res[key].city
								};
								cityList.push(obj)
							}
							_this.cityList = cityList; // 更新城市列表
						})
					},
					fnGetLineList() {
						let _this = this;
						_this.mySubway.getLineList(function(res) {
							_this.LineList = [].concat(res)
						})
					},
					fnHandChangeCode() {
						// 设置城市编码
						this.mySubway.setAdcode(this.adcode);
						this.fnCreateMetro();
					},
					fnHandChangelineId() {
						this.mySubway.showLine(this.lineId)
					}
				},
			})
		</script>
	</body>
	<script src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js"></script>
	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			uni.webView.getEnv(function(res) {
				console.log('当前环境：' + JSON.stringify(res));
			});
		});
	</script>
</html>